<template>
  <div>
    <div class="topbar">
      <div class="nav">
        <ul>
          <li>欢迎您,{{ this.$store.state.user.name }}</li>
        </ul>
      </div>
    </div>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#409eff"
        router
      >
        <div class="logo">
          <router-link to="/">
            <img src="" alt>
          </router-link>
        </div>
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/goods">全部商品</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>

        <div class="so">
          <el-input v-model="search" placeholder="请输入搜索内容">
            <el-button slot="append" icon="el-icon-search" @click="searchClick" />
          </el-input>
        </div>
      </el-menu>
    </el-header>

    <div class="main">
      <div class="list">
        <MyList :list="foodList" />
      </div>
    </div>
  </div>
</template>

<script>
import { getUserFood } from '@/api/user'

export default {
  name: '',
  data() {
    return {
      user: {
        id: 0,
        name: '',
        mobile: '',
        username: ''
      },
      foodList: [{
        smell: '',
        foods: [
          {
            pic: '',
            name: '',
            size: '',
            remark: '',
            url: ''
          }
        ]
      }]
    }
  },
  computed: {
    message() {
      return 'The webmaster said that you can not enter this page...'
    }
  },
  mounted() {
    this.fetchData(this.$store.state.user)
  },
  methods: {
    fetchData(data) {
      getUserFood(data).then(res => {
        console.log(res)
        this.foodList = res.data.foodModelList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods {
    background-color: #f5f5f5;
  }
  /* 面包屑CSS */
  .el-tabs--card .el-tabs__header {
    border-bottom: none;
  }
  .goods .breadcrumb {
    height: 50px;
    background-color: white;
  }
  .goods .breadcrumb .el-breadcrumb {
    width: 1225px;
    line-height: 30px;
    font-size: 16px;
    margin: 0 auto;
  }
  /* 面包屑CSS END */

  /* 分类标签CSS */
  .goods .nav {
    background-color: white;
  }
  .goods .nav .product-nav {
    width: 1225px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
  }
  .nav .product-nav .title {
    width: 50px;
    font-size: 16px;
    font-weight: 700;
    float: left;
  }
  /* 分类标签CSS END */

  /* 主要内容区CSS */
  .goods .main {
    margin: 0 auto;
    max-width: 1225px;
  }
  .goods .main .list {
    min-height: 650px;
    padding-top: 14.5px;
    margin-left: -13.7px;
    overflow: auto;
  }
  .goods .main .pagination {
    height: 50px;
    text-align: center;
  }
  .goods .main .none-product {
    color: #333;
    margin-left: 13.7px;
  }
  /* 主要内容区CSS END */
  /* 全局CSS */
  * {
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
  }
  #app .el-header {
    padding: 0;
  }
  #app .el-main {
    min-height: 300px;
    padding: 20px 0;
  }
  #app .el-footer {
    padding: 0;
  }
  a,
  a:hover {
    text-decoration: none;
  }
  /* 全局CSS END */

  /* 顶部导航栏CSS */
  .topbar {
    height: 40px;
    background-color: #3d3d3d;
    margin-bottom: 20px;
  }
  .topbar .nav {
    width: 1225px;
    margin: 0 auto;
  }
  .topbar .nav ul {
    float: right;
  }
  .topbar .nav li {
    float: left;
    height: 40px;
    color: #b0b0b0;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    margin-left: 20px;
  }
  .topbar .nav .sep {
    color: #b0b0b0;
    font-size: 12px;
    margin: 0 5px;
  }
  .topbar .nav li .el-button {
    color: #b0b0b0;
  }
  .topbar .nav .el-button:hover {
    color: #fff;
  }
  .topbar .nav li a {
    color: #b0b0b0;
  }
  .topbar .nav a:hover {
    color: #fff;
  }
  .topbar .nav .shopCart {
    width: 120px;
    background: #424242;
  }
  .topbar .nav .shopCart:hover {
    background: #fff;
  }
  .topbar .nav .shopCart:hover a {
    color: #ff6700;
  }
  .topbar .nav .shopCart-full {
    width: 120px;
    background: #ff6700;
  }
  .topbar .nav .shopCart-full a {
    color: white;
  }
  /* 顶部导航栏CSS END */

  /* 顶栏容器CSS */
  .el-header .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }
  .el-header .logo {
    height: 60px;
    width: 189px;
    float: left;
    margin-right: 100px;
  }
  .el-header .so {
    margin-top: 10px;
    width: 300px;
    float: right;
  }
  /* 顶栏容器CSS END */

  /* 底栏容器CSS */
  .footer {
    width: 100%;
    text-align: center;
    background: #2f2f2f;
    padding-bottom: 20px;
  }
  .footer .ng-promise-box {
    border-bottom: 1px solid #3d3d3d;
    line-height: 145px;
  }
  .footer .ng-promise-box {
    margin: 0 auto;
    border-bottom: 1px solid #3d3d3d;
    line-height: 145px;
  }
  .footer .ng-promise-box .ng-promise p a {
    color: #fff;
    font-size: 20px;
    margin-right: 210px;
    padding-left: 44px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    text-decoration: none;
  }
  .footer .github {
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
  }
  .footer .github .github-but {
    width: 50px;
    height: 50px;
    margin: 0 auto;
  }
  .footer .mod_help {
    text-align: center;
    color: #888888;
  }
  .footer .mod_help p {
    margin: 20px 0 16px 0;
  }

  .footer .mod_help p a {
    color: #888888;
    text-decoration: none;
  }
  .footer .mod_help p a:hover {
    color: #fff;
  }
  .footer .mod_help p span {
    padding: 0 22px;
  }
  /* 底栏容器CSS END */
</style>
